<template>
  <div class="nav_bar" :style="{ padding: padding }">
    <div class="nav">
      <div
        class="item"
        @click="toToPath(item)"
        v-for="item in navList"
        :key="item.id"
      >
        <span>{{ item.name }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getToken,
  getConfigWeb,
  getSort,
  getArticle,
  getColumn,
} from "@/api/index";
export default {
  props: {
    padding: {
      default: "0px 15%",
    },
  },
  data() {
    return {
      navList: [{ name: "首页", url: "/", id: 1 }],
    };
  },
  created() {
    this.getNavBar();
  },
  methods: {
    getNavBar() {
      getColumn({ type: 4 }).then((res) => {
        if (res.code === 0) {
          let dhlId = res.data.find((item) => item.code === "dhl").id;
          getColumn({ type: 4, pid: dhlId }).then((dhlRes) => {
            console.log(dhlRes);
            if (dhlRes.code === 0) {
              this.navList = [...this.navList, ...dhlRes.data];
            }
          });
        }
      });
    },
    toToPath(item) {
      console.log(item);
      if (item.url === "/detail") {
        window.open(item.note);
      } else {
        if (
          this.$route.path !== item.url ||
          (this.$route.query.name && this.$route.query.name !== item.name)
        ) {
          this.$router.push({
            path: item.url,
            query: {
              name: item.url !== "/" ? item.name : undefined,
              pid: item.url !== "/" ? item.id : undefined,
            },
          });
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.nav_bar {
  background-color: #eaeaea;
  .nav {
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .item {
      font-size: 20px;
      font-weight: bold;
      cursor: pointer;
      &:hover {
        text-decoration: underline;
      }
    }
  }
}
</style>
